<template>
  <div class="basic-container">
    <item-box title="运维管理">
      <template #content>
        <div class="content-warp">
          <div class="select-box">
            <el-select
              v-model="streetName"
              placeholder="Select"
              popper-class="screen-select"
              @change="handleStreetChange"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="chart-row">
            <div class="light-chart">
              <light-chart id="lightchart" :persent="openPersent"></light-chart>
              <div class="bg_titile"></div>
            </div>
            <div class="counts">
              <div class="titles">
                开启数
                <div style="color: #df570b">
                  {{ curData.openNum }}
                </div>
              </div>
              <div class="titles">
                关闭数
                <div style="color: #ebed38">{{ curData.closeNum }}</div>
              </div>
              <div class="titles">
                故障数
                <div style="color: #e5a935">{{ curData.troubleNum }}</div>
              </div>
            </div>
          </div>
          <div class="charts-row">
            <div class="pie-chart">
              <pie-chart
                id="piechart1"
                title="车位数"
                :count="countCar"
                :countAll="countCarAll"
              ></pie-chart>
            </div>
            <div class="pie-chart">
              <pie-chart
                id="piechart2"
                title="充电桩"
                :count="countBar"
                :countAll="countBarAll"
              ></pie-chart>
            </div>
          </div>
        </div>
      </template>
    </item-box>
  </div>
</template>

<script setup>
import ItemBox from '../ItemBox/index.vue'
import LightChart from './LightChart.vue'
import PieChart from './PieChart.vue'
import { onMounted, ref } from 'vue'
import { runFix } from '@/api/screen'
const streetName = ref('所有街道')
const options = [
  {
    value: '所有街道',
    label: '所有街道'
  },
  {
    value: '平安街道',
    label: '平安街道'
  },
  {
    value: '幸福街道',
    label: '幸福街道'
  },
  {
    value: '富强街道',
    label: '富强街道'
  },
  {
    value: '民主街道',
    label: '民主街道'
  },
  {
    value: '和平街道',
    label: '和平街道'
  }
]
const curData = ref({})
const dataList = ref([])
const openPersent = ref(83) // 亮灯率
const countCar = ref(0) // 车位数
const countCarAll = ref(0) // 总车位数
const countBar = ref(0) // 充电桩数
const countBarAll = ref(0) // 充电桩总数

const setValues = (data) => {
  if (!data) return
  openPersent.value = (data.openNum / data.streetLampCount).toFixed(2) * 100
  countCarAll.value = data.totalParkingNum
  countCar.value = data.parkingNum
  countBarAll.value = data.totalChargingStationNum
  countBar.value = data.useChargingStationNum
}
const getDataList = async () => {
  const res = await runFix()
  if (res) {
    dataList.value = res
    const temp = res.find((e) => e.streetName === streetName.value)
    curData.value = temp
    setValues(temp)
  }
}

const handleStreetChange = (val) => {
  const temp = dataList.value.find((e) => e.streetName === val)
  curData.value = temp
  setValues(temp)
}

onMounted(() => {
  getDataList()
})
</script>

<style lang="scss" scoped>
.basic-container {
  width: 100%;
  height: 100%;
  .content-warp {
    width: 100%;
    height: 100%;
    position: relative;
    .select-box {
      width: 123px;
      position: absolute;
      top: 0;
      right: 34px;
    }
    .chart-row {
      width: 100%;
      height: 56%;
      display: flex;
      .light-chart {
        width: 60%;
        height: 100%;
        margin-top: 30px;
        margin-left: 30px;
        position: relative;
        .bg_titile {
          width: 59px;
          height: 16px;
          background: url(~@@/images/screen/light_title_bg.png) no-repeat;
          background-size: 100% 100%;
          position: absolute;
          bottom: 9%;
          left: 40%;
          transform: scale(1.2);
        }
      }
      .counts {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: end;
        margin-left: -20px;
        .titles {
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-style: italic;
          color: rgba(189, 190, 190, 0.6);
          margin-right: 10px;
          letter-spacing: 5px;
          display: flex;
          > div {
            width: 70px;
            letter-spacing: 2px;
            font-size: 16px;
          }
        }
      }
    }
    .charts-row {
      width: 100%;
      height: 44%;
      display: flex;
      column-gap: 40px;
      align-items: center;
      .pie-chart {
        width: 28%;
        height: 63%;
        margin-left: 30px;
      }
    }
  }
  :deep(.el-input__inner) {
    background-color: rgba(22, 29, 35, 0.7);
    border: 1px solid #e5a935;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-style: italic;
    color: #bdbebe;
    height: 24px;
    line-height: 24px;
    border-radius: 0px;
  }
  :deep(.el-input__suffix) {
    top: -7px;
  }
}
</style>
